<template>
  <div class="app-container">
    <el-table :data="noticeData" border style="width: 100%">
      <el-table-column prop="notice_id" label="公告ID" width="150" />
      <el-table-column prop="notice_name" label="公告名称" />
      <el-table-column prop="notice_tag" label="标签" width="200" />
      <el-table-column prop="notice_time" label="创建时间" width="300" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="detail(row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogVisible" title="公告详情" width="80%">
      <div class="dialog-body">
        <div v-loading="htmlLoading">
          <iframe
            id="$$noticeBox$$"
            title="公告"
            width="100%"
            height="800px"
            :src="noticeUrl"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { sysNotice, sysNoticeDetail } from '@/api/auth'

const noticeData = ref([])
const noticeDetail = ref('')
const dialogVisible = ref(false)
const htmlLoading = ref(false)
const noticeUrl = ref('')

const detail = async ({ notice_id }) => {
  dialogVisible.value = true
  htmlLoading.value = true
  try {
    const { notice_html, notice_url } = await sysNoticeDetail(notice_id)
    noticeDetail.value = notice_html
    noticeUrl.value = notice_url
  } finally {
    htmlLoading.value = false
  }
}

onMounted(async () => {
  const { notice_infos } = await sysNotice()
  noticeData.value = notice_infos
})
</script>

<style lang="scss" scoped>
.app-container {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  :deep(.notice-html) {
    div,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    img {
      width: 100% !important;
    }
  }
}
</style>
